import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as _ from 'lodash';
import * as moment from 'moment';

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

import {
  DailyReportServiceProxy,
  SearchInputReport
} from '../../../shared/service-proxies/service-proxies';

@Component({
  selector: 'app-sell',
  templateUrl: './sell.component.html',
  styleUrls: ['./sell.component.scss']
})
export class SellComponent implements OnInit {

  monthDataParam: SearchInputReport = new SearchInputReport();
  id: any = "sell";
  list3s: any;
  // choosedTime: any = moment().format("YYYY-MM-DD");
  showNum: number = 0;
  monthValue: any = [];
  lastYearList: any = [];
  thisYearList: any = [];
  lastYearMonthList: any = [];
  lastYearMonthValue: any = [];
  nowDate: any = new Date();
  nowDate1: any = new Date();
  sureTime: any = parseInt(moment(this.nowDate).format("YYYY")) + parseInt(moment(this.nowDate).format("MM"));
  lastYear: any = parseInt(moment(this.nowDate).format("YYYY")) - 1 + "年";//去年的日期
  thisYear: any = parseInt(moment(this.nowDate).format("YYYY")) + "年";//今年的日期
  localdate: any = new Date(); //Sat Jul 20 2013 10:43:36 GMT+0800 (中国标准时间)
  lastYearDate: any = new Date(this.localdate - 365 * 24 * 60 * 60 * 1000);//去年的今天

  constructor(
    private router: Router,
    private _DailyReportServiceProxy: DailyReportServiceProxy,
    private screenOrientation: ScreenOrientation,
  ) { 
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
  }

  ngOnInit() {
    this.getLastYearData();
  }

  //将要离开这个页面是触发
  ionViewWillLeave() {
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
  }

  goBack() {
    this.router.navigateByUrl('home')
  }

  changeShowNum() {
    if(this.showNum == 0){
      this.showNum = 1;
      console.log("showNum", this.showNum);
    } else{
      this.showNum = 0;
    }
  }
  
  getLastYearData(){
    this.monthDataParam.start = this.lastYearDate;
    this.monthDataParam.year = true;
    this._DailyReportServiceProxy.utilizationRate(this.monthDataParam)
    .subscribe((res) =>{
      console.log(res);
      for(let i in res){
        this.thisYearList.push(res[i].utiRate);
      }
      this.getThisYearData();
    })
  }
  getThisYearData(){
    this.monthDataParam.start = this.nowDate1;
    this.monthDataParam.year = true;
    this._DailyReportServiceProxy.utilizationRate(this.monthDataParam)
    .subscribe((res) =>{
      console.log(res);
      for(let i in res){
        this.lastYearList.push(res[i].utiRate);
      }
      this.nrwWaterList();
    })
  }
  nrwWaterList() {
    let self = this;
    this.list3s = {
      title: {
        itemSize: 16,
        text: '总产销差(单位：百分比)',
        textStyle: {      //标题颜色
          color: '#f5f5f5'
        },
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: [this.lastYear, this.thisYear],
        textStyle: {      //标题颜色
          color: '#f5f5f5'
        },
      },
      toolbox: {
        show: true,
        iconStyle: {
          color: "#f5f5f5",
          borderColor: "#f5f5f5"
        },
        feature: {
          dataView: { show: false, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'], color: "#f5f5f5" },
          restore: { show: false },
          saveAsImage: { show: false },
          myTool2: {
            show: true,
            title: '自定义扩展方法',
            icon: 'image://../../../assets/images/edit.png',
            onclick: function () {
              self.changeShowNum();
            }
          }
        },
      },
      xAxis: [
        {
          type: 'category',
          color: "#65b1eb",
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          axisLabel: {
            textStyle: {
              color: '#f5f5f5'
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#f5f5f5'
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff',//左边线的颜色
              width: '2'//坐标线的宽度
            }
          }
        },
      ],
      series: [
        {
          name: this.lastYear,
          type: 'line',
          color: '#65b1eb',
          min: 150,
          data: this.lastYearList,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        },
        {
          name: this.thisYear,
          type: 'line',
          color: '#75d999',
          min: 150,
          data: this.thisYearList,
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }
      ]
    }
    console.log("chart", this.list3s);
  }

  choosedTime() {
    this.thisYear = this.sureTime.year.value + "年";
    this.lastYear =  this.sureTime.year.value - 1 + "年";
    this.nowDate1 = moment(this.sureTime.year.value + "-" + 12);
    this.monthDataParam.start = this.nowDate1;
    this.thisYearList = [];
    this.lastYearList = [];
    this.lastYearDate = moment(this.sureTime.year.value - 1 + "-" + 12);
    this.getLastYearData();
  }

}
